<template>
  <el-container style="background-color: #fff">
    <el-aside style="padding: 20px; box-sizing: border-box" v-loading="treeLoading">
      <avue-tree :option="treeOption" :data="treeData" @node-click="handleTreeClick" style="height: calc(100% - 50px)"
        ref="treeRef" @save="handleTreeSave" @update="handleTreeUpdate" @del="handleTreeDel"></avue-tree>
    </el-aside>
    <el-main>
      <basic-crud v-model:formData="formData" v-model:search="searchFormData" :option="option" ref="basicCrudRef"
        :beforeOpen="handleBeforeOpen" businessUrl="/bd/goodsLocationController" :apiListParams="apiListParams"
        :apiAddParams="apiListParams">
      </basic-crud>
    </el-main>
  </el-container>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { getCrudFunByBaseUrl } from '@/utils/index.js'
const { apiAdd, apiEdit, apiDel, apiRefer } = getCrudFunByBaseUrl('/bd/warehouseController')
const searchFormData = ref({})
const basicCrudRef = ref()
const treeData = ref([])
const formData = ref({})
const treeOption = ref({
  defaultExpandAll: true,
  nodeKey: 'id',
  props: {
    label: 'name',
    value: 'id',
    children: 'children',
  },
  addBtn: false,
  menu: false,
  formOption: {
    column: [
      {
        label: "编号",
        prop: "code",
        search: true,
        sortable: true,
        rules: [{ required: true, message: "编号不能为空" }],
      },
      {
        label: "名称",
        prop: "name",
        search: true,
        sortable: true,
        rules: [{ required: true, message: "名称不能为空" }],
      },
      {
        label: "排序",
        prop: "orderNum",
        width: 80,
        type: "number",
        step: 10,
        rules: [
          {
            type: "number",
            message: "排序号必须为数字值",
            trigger: "blur",
          },
        ],
      },
      {
        label: "描述",
        type: 'textarea',
        span: 24,
        prop: "des",
        sortable: true,
      },
    ],
  }
})
const treeLoading = ref(true)
const handleTreeSave = (parent, data, done, loading) => {
  if (parent.key) {
    data.parentId = parent.key
  } else {
    data.parentId = 'root'
  }
  apiAdd(data).then(res => {
    ElMessage.success('新增成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  })
}

const handleTreeUpdate = (parent, data, done, loading) => {
  apiEdit(data).then(res => {
    ElMessage.success('编辑成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  })
}
const handleTreeDel = (data, done) => {
  const loadingInstance = ElLoading.service({ text: '删除中...' })
  apiDel(data.key).then(res => {
    ElMessage.success('删除成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  }).finally(() => {
    loadingInstance.close()
  })
}
// 获取树结构数据
const getTreeList = async () => {
  treeData.value = await apiRefer({}, treeLoading) || []
}

const treeRef = ref()
const apiListParams = ref({
  warehouse: undefined
})
const handleTreeClick = (data) => {
  basicCrudRef.value.pageData.currentPage = 1
  basicCrudRef.value.pageData.pageSize = 20
  apiListParams.value.warehouse = data.id
}
getTreeList()

const option = ref({
  menuWidth: 200,
  searchSpan: 8,
  selection: true,
  addSonBtn: true,
  menuWidth: 260,
  column: [
    {
      label: '状态',
      prop: 'status',
      search: true,
      searchType: 'select',
      sortField: 'status',
      type: 'select',
      statusTag: true,
      width: 100,
      display: false
    },
    {
      label: '编号',
      propType: 'String',
      prop: 'code',
      sortable: true,
      search: true,
      rules: [{ required: true, message: '基本信息编号不能为空' }],
      width: 200
    },
    {
      label: '名称',
      propType: 'String',
      prop: 'name',
      search: true,
      rules: [{ required: true, message: '基本信息编号不能为空' }],
      sortable: true,
      width: 200
    },
    {
      label: '保管员',
      prop: 'curators',
      sortable: true,
      width: 150
    },
    {
      label: '出库优先级',
      prop: 'outPriority',
      type: 'number',
      step: 10,
      width: 100
    },
    {
      label: '入库优先级',
      prop: 'inPriority',
      type: 'number',
      step: 10,
      width: 100
    },
    {
      label: '容积(m3)',
      prop: 'volume',
      sortable: true,
      type: 'number',
      width: 150
    },
    {
      label: '描述',
      prop: 'textarea',
      sortable: true,
    }
  ]
})

const handleBeforeOpen = (done, type, loading) => {
  if (!apiListParams.value.warehouse && type === 'add') {
    return ElMessage.warning('请选择库房！')
  }
  done()
}



</script>

<style lang="scss" scoped></style>
